<template>
  <!--提交毕业设计（论文）-->
  <div class="graduation-design">
    <InnerBreadcrumb v-model="indexKey" :path="breadPath" :label-args="{name: breadName}" :showBack="true" />
    <div class="edu-page-warp" v-show="indexKey === 'MAIN'">
      <el-card shadow="never">
        <div class="edu-page-title">{{$t('graduationDesign.graduationDesignThesis')}}</div>
        <div class="edu-opertion-bar">
          <div class="float-right">
            <el-button @click="onExport" v-loading.fullscreen.lock="loading" element-loading-text="Loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, .48)">{{$t('graduationDesign.export')}}</el-button>
            <el-button type="primary" @click="onAdd">{{$t('graduationDesign.addGraduationDesign')}}</el-button>
          </div>
        </div>
        <edu-table ref="submitGraduationDesignTable" :url="getList" @selection-change="handleSelectChange">
          <edu-table-column :label="$t('graduationDesign.graduationYear')" prop="grade" min-width="80"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.subjectName')" prop="projectName" min-width="100"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.tutor')" prop="teacherName" min-width="100"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.submitTime')" prop="submitTime" min-width="110"></edu-table-column>
          <edu-table-column :label="$t('graduationDesign.status')" min-width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 'WaitCommit'" type="info">{{$t('graduationDesign.draft')}}</el-tag>
              <el-tag v-else-if="scope.row.status === 'Process'" type="info">{{$t('graduationDesign.pendingReview')}}</el-tag>
              <el-tag v-else-if="scope.row.status === 'Reject'" type="danger">{{$t('graduationDesign.rejected')}}</el-tag>
              <el-tag v-else-if="scope.row.status === 'End'" type="success">{{$t('graduationDesign.passed')}}</el-tag>
            </template>
          </edu-table-column>
          <edu-table-column :label="$t('graduationDesign.operation')" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="onEdit(scope.row)" v-if="scope.row.status === 'WaitCommit' || scope.row.status === 'Reject'">{{$t('graduationDesign.edit')}}</el-button>
              <el-button type="text" @click="onRevoke(scope.row)" v-if="scope.row.status === 'Process'">{{$t('graduationDesign.revoke')}}</el-button>
              <el-button type="text" @click="onDelete(scope.row)" v-if="scope.row.status === 'WaitCommit'">{{$t('graduationDesign.delete')}}</el-button>
              <el-button type="text" @click="onView(scope.row)">{{$t('graduationDesign.view')}}</el-button>
            </template>
          </edu-table-column>
        </edu-table>
      </el-card>
    </div>
    <div v-if="indexKey === 'GRADUATION_DESIGN'">
      <GraduationDesignInfo :actionType="actionType" :progressData="progressData" :graduationDesignForm="graduationDesignForm" :studentForm="studentForm" @graduation-design-submit="onSubmit" @graduation-design-save="onSave" @graduation-design-cancel="onCancel"></GraduationDesignInfo>
    </div>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/graduationDesign";
import tools from 'common/src/views/underGraduationDesign/tools.js';

export default {
  name: 'submitGraduationDesign',
  data() {
    return {
      api: API,
      getList: '/api/designservice/docDissertation/list',
      queryForm: {},
      indexKey: 'MAIN',
      breadPath: {
        label: this.$t('graduationDesign.submitGraduationDesign'),
        key: "MAIN",
        children: [
          {
            key: "GRADUATION_DESIGN",
            label: "{name}" + this.$t('graduationDesign.graduationDesignThesis')
          }
        ]
      },
      actionType: 'ADD',
      selectedData: [], // 勾选的列表数据
      loading: false,
      studentForm: {},
      newKey: '',
      graduationDesignForm: {},
      progressData: [] //审核进度列表
    };
  },
  computed: {
    breadName: function () {
      let label = this.$t('graduationDesign.add');
      if (this.actionType === "EDIT") {
        label = this.$t('graduationDesign.edit');
      } else if (this.actionType === "REVIEW_VIEW") {
        label = this.$t('graduationDesign.view');
      }
      return label;
    }
  },
  mounted() {
    this.searchList();
  },
  methods: {
    searchList() {
      this.$refs.submitGraduationDesignTable.search(this.queryForm);
    },
    handleSelectChange(val) {
      this.selectedData = val;
    },
    // 查学生信息
    getStudentInfo(params) {
      return this.api.getStudentInfo(params).then(res => {
        return res.data;
      });
    },
    // 查开题报告信息
    getReportDetail(params) {
      return this.api.getReportDetail(params).then(res => {
        return res.data;
      });
    },
    async onAdd() {
      this.actionType = "ADD";
      const reportInfo = await this.getReportDetail({});
      if (!reportInfo) {
        this.$eduAlert(this.$t('graduationDesign.addGraduationDesignTips'), this.$t('graduationDesign.prompt'));
        return;
      }
      this.indexKey = "GRADUATION_DESIGN";
      this.graduationDesignForm = { ...reportInfo };
      this.graduationDesignForm.dissertationName = "";
      this.graduationDesignForm.dissertationPath = "";
      this.graduationDesignForm.attachName = "";
      this.graduationDesignForm.attachPath = "";
    },
    async onEdit(row) {
      this.actionType = "EDIT";
      const params = {
        studentId: row.studentId
      };
      const reportInfo = await this.getReportDetail(params);
      this.graduationDesignForm = Object.assign({}, reportInfo, { ...row });
      this.indexKey = "GRADUATION_DESIGN";
    },
    // 撤销
    onRevoke(row) {
      this.$eduConfirm(this.$t('graduationDesign.revokeConfirmTips'), this.$t('graduationDesign.prompt')).then(res => {
        const params = {
          idList: [row.flowNo || ""],
          status: "Recall"
        };
        this.api.approval(params).then(res => {
          this.$message.success(this.$t('graduationDesign.revokeSuccess'));
          this.searchList();
        });
      }).catch(() => { });
    },
    onDelete(row) {
      this.$delConfirm(this.$t('graduationDesign.deleteConfirm'), this.$t('graduationDesign.delete')).then(res => {
        const params = { ...row };
        this.api.delete(params).then(res => {
          this.$message.success(this.$t('graduationDesign.deleteSuccess'));
          this.searchList();
        });
      }).catch(() => { });
    },
    // 查审核进度
    getReviewProgress(applyNo) {
      this.api.getProgress(applyNo).then(res => {
        this.progressData = res.data.listApproveHistory;
      }).catch();
    },
    // 查看
    async onView(row) {
      this.actionType = "REVIEW_VIEW";
      const params = {
        studentId: row.studentId
      };
      this.studentForm = await this.getStudentInfo(params);
      const reportInfo = await this.getReportDetail(params);
      this.graduationDesignForm = Object.assign({}, reportInfo, { ...row });
      this.indexKey = "GRADUATION_DESIGN";
      this.progressData = [];
      if (row.flowNo) {
        this.getReviewProgress(row.flowNo);
      }
    },
    // 保存毕业设计（论文）
    onSave(data, action) {
      let reqApi = null;
      if (action === "ADD") {
        reqApi = this.api.save(data);
      } else {
        reqApi = this.api.update(data);
      }
      reqApi.then(res => {
        this.$message.success(this.$t('graduationDesign.saveSuccess'));
        this.indexKey = "MAIN";
        this.searchList();
      }).catch(() => { });
    },
    // 提交毕业设计（论文）
    onSubmit(data) {
      this.api.submit(data).then(res => {
        this.$message.success(this.$t('graduationDesign.submitSuccess'));
        this.indexKey = "MAIN";
        this.searchList();
      }).catch(() => { });
    },
    onCancel() {
      this.indexKey = "MAIN";
      this.searchList();
    },
    // 导出
    onExport() {
      const params = {
        identity: "3", // 学生
        condition: {},
        selectList: this.selectedData
      };
      this.newKey = "";
      this.api.export(params).then(res => {
        tools.downloadZip(res.data.key,
          `/api/designservice/docDissertation/exportDissertation/${res.data.data.newKey}`,
          "提交毕业设计(论文).zip",
          this.api.getDesignExportStatus, this
        );
        /*this.delayRequest(res.data.key);
        this.newKey = res.data.data.newKey;*/
      });
    },
    getExportStatus(key) {
      return this.api.getDesignExportStatus(key).then(res => {
        return res;
      }).catch(err => {
        this.loading = false;
      });
    },
    // 查文件导出状态，等待导出
    async delayRequest(key) {
      this.loading = true;
      await new Promise(resolve => setTimeout(resolve, 3000));
      const resData = await this.getExportStatus(key);
      if (resData.code === 200 && resData.data.status) {
        this.loading = false;
        window.open("/api/designservice/docDissertation/exportDissertation/" + this.newKey);
      } else {
        this.delayRequest(key);
      }
    }
  },
  components: {
    GraduationDesignInfo: () => import('../components/graduationDesignInfo')
  }
}
</script>
<style lang="scss" scoped>
</style>
